<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
    <style>
        form {
            width: 100%;
            background-color: rgb(255, 255, 255);
            text-align: center;
        }

        input {
            margin: 10px;
        }

        .xy {
            font-size: 12px;
            color: rgb(112, 111, 111);
        }

        select {
            padding: 5px;
            margin: 5px;
        }
    </style>
</head>

<body>
    <form>
        账号：<input class="zh" type="text" placeholder="请输入账号"><br><!--文本框-->
        密码：<input class="mm" type="password" placeholder="请输入密码"><br><!--密码框-->
        <input type="radio" name="sex" id="nan" checked><label for="nan">男</label>
        <input type="radio" name="sex" id="nv"><label for="nv">女</label><br><!--单选框-->
        爱好：
        <input type="checkbox" name="hobby" id="lq" checked><label for="lq">篮球</label>
        <input type="checkbox" name="hobby" id="zq"><label for="zq">足球</label>
        <input type="checkbox" name="hobby" id="ppq"><label for="ppq">乒乓球</label><br>
        <input type="file" title="请选择文件" multiple>
        <div class="xy"><input type="checkbox">我同意<u>《用户协议》</u>和<u>《隐私条款》</u></div>

        <select multiple><!--多选框-->
            <option value="1">选项1</option><!--默认选中-->
            <option value="2">选项2</option>
            <option value="3">选项3</option>
            <option value="4">选项4</option>
            <option value="5">选项5</option>
            <option value="6" selected>选项6</option>
        </select><br>
        <textarea>请输入内容</textarea><br>
        <input class="btn" type="submit" value="提交" onclick="put()">
        <input class="btn" type="reset" value="重置">
    </form>
    <script>
        function put() {
            let zh = document.querySelector('.zh').value;//变量要写在里面不然点击按钮会刷新页面导致变量清空
            let mm = document.querySelector('.mm').value;
            console.log(zh, mm)
            if (zh.length == 0 || mm.length == 0) {
                alert('账号或密码不能为空！！！');

            }
        }
    </script>
</body>

</html>